<template>
  <div style="height: 100%;margin:10px 0 20px;">
    <el-container class="pad-r-l20">
      <el-row type="flex" align="center" justify="space-between" class="el-col-24-clear w100">
        <el-col style="width: 30%">
          <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
            <el-header class="lisa-bi-el-header" style="text-align: left;">中置轴</el-header>
            <el-main>
              <el-row type="flex" align="bottom" justify="center" class="f10 el-col-24-clear w100">
                <el-col v-if="middleShaftInfo.amount" class="Highlight-bold pad-r10">{{middleShaftInfo.amount}}</el-col>
                <el-col v-else class="Highlight-bold pad-r10">0</el-col>
                <el-col>台</el-col>
              </el-row>
            </el-main>
          </el-card>
        </el-col>
        <el-col  style="width: 30%">
          <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
            <el-header class="lisa-bi-el-header" style="text-align: left;">标准车(6台)</el-header>
            <el-main>
              <el-row type="flex" align="bottom" justify="center" class="f10 el-col-24-clear w100">
                <el-col v-if="cargo6Info.amount" class="Highlight-bold pad-r10">{{cargo6Info.amount}}</el-col>
                <el-col v-else class="Highlight-bold pad-r10">0</el-col>
                <el-col>台</el-col>
              </el-row>
            </el-main>
          </el-card>
        </el-col>
        <el-col  style="width: 30%">
          <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
            <el-header class="lisa-bi-el-header" style="text-align: left;">标准车(8台)</el-header>
            <el-main>
              <el-row type="flex" align="bottom" justify="center" class="f10 el-col-24-clear w100">
                <el-col v-if="cargo8Info.amount" class="Highlight-bold pad-r10">{{cargo8Info.amount}}</el-col>
                <el-col v-else class="Highlight-bold pad-r10">0</el-col>
                <el-col>台</el-col>
              </el-row>
            </el-main>
          </el-card>
        </el-col>
      </el-row>
    </el-container>
    <el-main>
      <travel-mileage-chart ref="travelMileageCharts"></travel-mileage-chart>
    </el-main>
    <el-container class="pad-r-l20">
      <el-row type="flex" align="center" justify="space-between" class="el-col-24-clear w100">
        <el-col style="width: 48%;">
          <oil-burn-chart ref="oilBurnCharts"></oil-burn-chart>
        </el-col>
        <el-col style="width: 48%;">
          <empty-weight-chart ref="emptyWeightCharts"></empty-weight-chart>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script type="text/ecmascript-6">
  import TravelMileageChart from './components/travelMileageChart'
  import OilBurnChart from './components/oilBurnChart'
  import EmptyWeightChart from './components/emptyWeightChart'
  import * as FleetApi from '@/api/fleet'
  export default {
    name: '',
    data() {
      return {
        middleShaftInfo: '',
        cargo6Info: '',
        cargo8Info: ''
      }
    },
    components: {
      TravelMileageChart, OilBurnChart, EmptyWeightChart
    },
    created() {
      this.initData()
    },
    mounted() {
    },
    methods: {
      async initData() {
        try {
          const val1 = await FleetApi.getFleetInfo()
          const val2 = await FleetApi.getFleetChartOne()
          const val3 = await FleetApi.getFleetChartTwo()
          const val4 = await FleetApi.getFleetChartThree()
          this.middleShaftInfo = val1.data.middle_shaft
          this.cargo6Info = val1.data.cargo_6
          this.cargo8Info = val1.data.cargo_8
  
          const val2_lastYearData = val2.data.lastYear
          const val2_currentYearData = val2.data.currentYear
          this.$refs.travelMileageCharts.initCharts(val2_lastYearData, val2_currentYearData)
  
          const val3_lastYearData = val3.data.lastYear
          const val3_currentYearData = val3.data.currentYear
          this.$refs.oilBurnCharts.initCharts(val3_lastYearData, val3_currentYearData)
  
          const val4_lastYearData = val4.data.lastYear
          const val4_currentYearData = val4.data.currentYear
          this.$refs.emptyWeightCharts.initCharts(val4_lastYearData, val4_currentYearData)
        } catch (err) {
          console.error(err)
        }
      }
    }
  }
</script>

<style lang="css">

</style>
